<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CSSClasses">
	<head>
		<meta charset="UTF-8">
		<title>CSSClasses</title>
		<style type="text/css">
			.ng-cloak {
				display: none;
			}
			.css-form input.ng-invalid.ng-dirty {
				background-color: #fa787e;
			}
			.css-form input.ng-valid.ng-dirty {
				background-color: #78fa89;
			}
		</style>
	</head>
	<body>
		<div ng-controller="MyCtrl" class="ng-cloak">
			<form novalidate class="css-form" name="formName">
				名字:
				<input ng-model="user.name" type="text" required>
				<br/>
				Email:
				<input ng-model="user.email" type="email" required>
				<br/>
				性别:
				<input value="男" ng-model="user.gender" type="radio">
				男
				<input value="女" ng-model="user.gender" type="radio">
				女
				<br/>
				<button ng-click="reset()">
					RESET
				</button>
				<button ng-click="update(user)">
					SAVE
				</button>
			</form>
			<pre>form = {{user | json}}</pre>
			<pre>saved = {{saved | json}}</pre>
		</div>
		<script src="libs/angular.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			var app = angular.module("CSSClasses", []);
			app.controller("MyCtrl", function($scope, $window) {
				$scope.saved = {};
				$scope.update = function(user) {
					$scope.saved = angular.copy(user);
				};

				$scope.reset = function() {
					$scope.user = angular.copy($scope.saved);
				};

				$scope.reset();
				//不合法的值将不会进入user
			});
		</script>
	</body>
</html>